<template>
  <div class="home">
    <div class="header">
      <!-- 页面头部和查询区域 -->
      <div class="ParkingSpaceManagement-tittle">
        <div class="crumbs">
          <p><span>系统设备 /</span> <span> 操作日志</span></p>
          <h3>操作日志</h3>
        </div>
        <div class="search">
          <div class="search-left">
            <el-form-item label="操作人">
              <el-input clearable v-model="carstateId" placeholder="请输入" />
            </el-form-item>
          </div>
          <div class="search-right">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="body">
        <div class="equipment">
          <span>操作记录</span>
          <div class="title-btn">
            <el-button type="primary">导出</el-button>
          </div>
        </div>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :cell-style="cellStyle"
          :header-row-style="headerStyle"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column
            prop="operatingTime"
            label="操作时间"
            align="center"
          />
          <el-table-column prop="user.name" label="操作人" align="center" />
          <el-table-column
            prop="operationModule"
            label="操作模式"
            align="center"
          />
          <el-table-column
            prop="operationContent"
            label="操作内容"
            align="center"
          />
        </el-table>
        <!-- 分页 -->
        <div class="demo-pagination-block">
          <Page
            :total="total"
            :count="count"
            :currentPage="page"
            @handleCurrentChange="handleCurrentChange"
            @handleSizeChange="handleSizeChange"
          ></Page>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import router from "../../router/index";
import Page from "../../components/Page.vue";
import http from "../../utils/http";
import { ElMessage } from "element-plus";

const cellStyle = ref({
  height: "60px",
  fontSize: "15px",
});
const headerStyle = ref({
  height: "60px",
  fontSize: "15px",
  color: "black",
});
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  console.log(val);
  multipleSelection.value = val;
  console.log(multipleSelection.value);
};

let tableData = ref([]);
let carstateId = ref("");
let total = ref(0);
let page = ref(1);
let count = ref(5);

let handleEdit = () => {};
let handleCurrentChange = (val) => {
  console.log(val);
  page.value = val;
  getData();
};
let handleSizeChange = (val) => {
  console.log(val);
  count.value = val;
  getData();
};

// 数据
let getData = () => {
  http({
    url: "/operationLog/list",
    method: "get",
    params: {
      page: page.value,
      limit: count.value,
      name: carstateId.value,
    },
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      tableData.value = data.data;
      total.value = data.total;
    }
  });
};

//搜索
let search = () => {
  getData();
};
//重置
let reset = () => {
  carstateId.value = "";
  page.value = 1;
  getData();
};

onMounted(() => {
  console.log("挂载后");
  getData();
});
</script>

<style lang="less" scoped>
.header {
  width: 90%;
  // height: 100%;
  margin: auto;

  .ParkingSpaceManagement-tittle {
    margin-top: 20px;
    background-color: white;

    .crumbs {
      padding: 15px 20px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;

      p {
        margin-bottom: 10px;

        span:nth-child(1) {
          color: #8d8d8d;
        }

        span:last-child {
          color: #000;
        }
      }
    }

    .search {
      width: 93%;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .search-left {
        display: flex;

        div:nth-child(1) {
          margin-right: 50px;
        }

        .el-input {
          margin-left: 15px;
          width: 250px;
        }
      }
    }
  }

  .body {
    padding: 15px 20px;
    margin-top: 20px;
    background-color: white;

    .equipment {
      width: 96%;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .el-table {
      .el-button {
        margin: 0;
      }
    }
  }

  .el-pagination {
    margin-top: 20px;
    // padding-right: 10px;
    justify-content: flex-end;
  }
}
</style>
